<template>
  <!--查看明细-->
  <div id="app">
      <loading v-if="loading"></loading>
      <div v-else class="evaluate">
          <div class="text">
              <p class="text-p">我们很重视您的体验，请留下您的投诉原因.</p>
              <p class="text-p">我们收到后会第一时间处理并回复您!</p>
          </div>
          <div class="tag-list">
              <span class="center" :class="{'on':selected == index}" v-for="(item,index) in orderTag" v-text="item.text" @click="selecttext(index,item)"></span>
          </div>
          <div class="input-textar">
              <textarea class="text-area" contenteditable="true" name="eval-text" cols="30" rows="10" v-model="remark" placeholder="请输入补充说明..."></textarea>
          </div>
          <div class="hr"></div>
          <div class="flex-between problem_pirture">
            <div class="form_text">上传照片</div>
            <div style="width: 5rem;justify-content: flex-start;" class="flex">
                <img v-for="(item,index) in image" :src="item" @click="deleteImage(index)" style="width: 1rem;">
                <form id= "uploadForm1"  enctype="multipart/form-data" class="add_priture relative" v-if="image.length<5" @click="addPic()">
                    <input type="file" class="absolute" id="uploaderInput" style="width: 1.38rem;height: 1.38rem;opacity: 0;" accept="image/*" multiple/>
                </form>
            </div>
          </div>
          <div class="flex-between problem_mobile">
            <div class="form_text">联系电话</div>
            <div><input type="text" v-model="mobile" placeholder="请输入您的联系电话"></div>
          </div>
          <div class="hr" style="height: .4rem;"></div>
          <div class="my-btn" @click="submitComplaint">提交申诉</div>
      </div>
  </div>
</template>
<script>
    import 'assets/css/common.css'
    import './index.css'
    import common from 'assets/js/common'
    import Loading from "components/loading.vue"
export default {
  data() {
    return {
        remark:'',
        loading:false,
        selected:0,
        orderTag:[],
        orderId:'',
        people_id:'',
        mobile:'',
        image:[], //本地图片数组
        urls:[], //图片上传之后的七牛地址数组
        files:[] //选择图片时将数据存起来 避免再选择会清空之前的
    }
  },
  components:{Loading},
  //已成功挂载，相当ready()
  mounted(){
      this.selected = 0;
      this.orderId = common.getQueryString('orderId');
      this.getTags();
  },
  //相关操作事件
  methods: {
    addPic(){
        var vm = this;
        var input = $("#uploaderInput");
        input.unbind('change').on('change', function (e) {
            var files = input[0].files;
            console.log(files);
            vm.files = [...vm.files,...files];
            if(vm.files.length > 5){
              common.errMessage("您最多上传5张图片");
              vm.files = vm.files.slice(0,5);
            }
            vm.image = []; //先清空再追加进去
            console.log(vm.files);
            var pirtureLength = vm.files.length;
            for (var i = 0; i < pirtureLength; i++) {
                var reader = new FileReader();
                reader.readAsDataURL(vm.files[i]);
                reader.onload = function () {
                    vm.image.push(this.result);
                };
            }
        });
    },
    //传到七牛
    upload(param,config,pathName,num){
        //先从自己的服务端拿到token
        common.ajax({
           type:'GET',
           url:'api/qiniutoken'
        }).then(result=>{
            var formData = new FormData();
            this.urls = [];//上传前先清空
            var len = this.files.length;
            console.log(this.files);
            for(var i=0; i<len;i++){
                formData.append('file', this.files[i]);
                formData.append('key',common.getUUId());
                formData.append('token',result.data.token);
                $.ajax({
                    type: 'post',
                    url: "http://upload-z0.qiniu.com",
                    data: formData,
                    dataType: 'JSON',
                    cache: false,
                    processData: false,// jQuery不要去处理发送的数据
                    contentType: false,
                    success:(response)=>{
                        this.urls.push(response.key);
                        //所有图片上传完成后保存申诉请求
                        if(this.urls.length == len){
                          this.submitFun(this.urls);
                        }               
                    },
                    error:(res)=>{
                        common.errMessage(res);
                    }
                })
            }
        })
    },
    deleteImage:function(index){
       this.image = this.image.delete(index, 1);
       console.log(this.image)
       this.files = this.files.delete(index, 1);
       console.log(this.files)
    },
    selecttext:function(index,item){
        this.selected = index;
        this.people_id = item.id;
    },
    getTags:function(){
      common.ajax({
          type:'GET',
          url:'api/adder/order/'+this.orderId+'/problem'
      }).then(res=>{
         this.loading = false;
         this.orderTag = res.data;
         if(res.data.length>0){
            this.people_id = res.data[0].id;
         }
       })
    },
    submitComplaint(){
      let img = '';
      if(this.image.length>0){
        this.upload();
      }else{
         this.submitFun([]);
      }
    },
    submitFun(img){
        console.log(img);
        let imgStr = '';
        if(img.length>0){
           imgStr = img.join(',');
        }else{
           imgStr = '';
        }
        common.ajax({
            url:'api/adder/order/'+this.orderId+'/feedback',
            data:{
              people_id:this.people_id,
              remark:this.remark,
              mobile:this.mobile,
              image:imgStr
            }
        }).then(res=>{
           common.errMessage(res.info);
        })
      }
    }
}
</script>

